﻿@{
    ViewBag.Title = "socialphotos.codeplex.com";
    Layout = "~/Views/Shared/M/_Layout.cshtml";
}
<section class="content">
    <script id="photoTemplate" type="text/x-jquery-tmpl">
    <div class="ui-block-e"><img class="thumb" alt="${Title}" src='${URL}' /></div>   
    </script>
    <div id="photogrid" class="ui-grid-a">
    </div>
    <a data-role="button"  data-transition="flip"  style="float:right" href="@Url.Action("Index","Location")">Log on</a>
</section>
@section scripts {
<script type="text/javascript">
    //Mobile   
    $(document).ready(function () {
        var query = '/socialphotos/PhotoCloud.svc/getRandomPhotos?number=8';
        var query1 = '/socialphotos/PhotoCloud.svc/getRandomPhotos?number=1';
        $.getJSON(query, function (result) {
            var photos = [];
            $.each(result.d, function (i, item) {
                var photo = { URL: "/socialphotos/Thumbnail.ashx?f=" + item.FileName, Title: "" };
                photos.push(photo);
            });
            $("#photoTemplate").tmpl(photos).appendTo("#photogrid");

            $("img.thumb").click(function () {
                var flipImage = $(this);
                flipImage.fadeOut('slow', function () {
                    $.getJSON(query1, function (result) {
                        flipImage[0].src = "/socialphotos/Thumbnail.ashx?f=" + result.d[0].FileName;
                        flipImage.fadeIn('slow', null);

                    });
                });
            });
        });       
    }
   );
    </script>
}
